<template>
  <view>
    <view class="header-common" :style="{paddingTop: (useAppData.titleHeight+12) + 'px'}">
      <view class="back-box" @tap="gotoBack">
        <image class="back-img" src="../../static/icon-back.png"></image>
      </view>
    </view>
    <div class="logo-box">
      <image class="logo-img" src="../../static/logo.png"></image>
      <!-- <p class="title">健康智能伙伴</p> -->
    </div>
    <div class="form-box">
      <div class="input-item">
        <uni-easyinput v-model="state.telNum" placeholderStyle="font-size: 32rpx;color: rgba(34,34,34,0.41);" placeholder="请输入手机号" @input="handleTelInput"></uni-easyinput>
      </div>
      <div class="input-item">
        <uni-easyinput v-model="state.telCode" placeholder="验证码" placeholderStyle="font-size: 32rpx;color: rgba(34,34,34,0.41);"></uni-easyinput>
        <button :class="['code-btn', {'code-active': state.isSend}]" @tap="handleSendCode">{{state.codeBtn}}</button>
      </div>
    </div>
    <div class="btn-box">
      <button class="tel-btn" @tap="gotoBack">取消</button>
      <button class="secret-btn" @tap="handleLogin">登录</button>
    </div>
    <!-- <div class="other-login" @tap="gotoBack">其他登录方式</div> -->
  </view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import * as API from "../../api/api.js"
import { checkPhone } from "../../utils/util"
import { storeToRefs } from "pinia";
import { userLoginStore } from "../../store/userLogin";
import { useAppStore } from "../../store/app";
import {useRunInfoStore} from "@/store/runInfo";
const useRunInfoData = useRunInfoStore();
const useAppData = useAppStore()
const userLoginData = userLoginStore()
const { appIndex } = storeToRefs(userLoginData);
const state = reactive({
  checked: true,
  codeBtn: "发送验证码",
  timer: null,
  timeNum: 60,
  telNum: null,
  telCode: null,
  isSend: false
})

const gotoBack = () => {
  uni.navigateBack()
}

const handleTelInput = () => {
  // if (state.telNum.length === 11 && !isNaN(state.telNum)) {
  //   state.isSend = true
  // } else {
  //   state.isSend = false
  // }
}

const handleSendCode = () => {
  if (!state.telNum) {
    uni.showToast({
      title: "请先填写手机号",
      icon: "none"
    })
    return
  }
  if (!checkPhone(state.telNum)) {
    uni.showToast({
      title: "请填写正确的手机号",
      icon: "none"
    })
    return
  }
  if (state.isSend) return
  console.log("发送验证码")
  state.isSend = true
  clearInterval(state.timer)
  state.timer = setInterval(() => {
    state.timeNum--
    state.codeBtn = `已发送 ${state.timeNum}`
    if (state.timeNum < 1) {
      state.isSend = false
      state.codeBtn = "发送验证码"
      clearInterval(state.timer)
    }
  }, 1000)
  userLoginData.getTelCodeNum({mobile: state.telNum})
}

// 登录
const handleLogin = () => {
  if (!state.telNum || !state.telCode || !checkPhone(state.telNum)) {
    uni.showToast({
      title: "请先填写正确的手机号和验证码",
      icon: "none"
    })
    return
  }
  // useRunInfoData.setPopupExpire('')
  userLoginData.handleTelCodeLogin({
    inType: "mobile",
    mobile: state.telNum,
    otpCode: state.telCode
  })
}


</script>
<style lang="scss" scoped>
  .logo-box{
    text-align: center;
    margin-top: 150rpx;
    .logo-img{
      width: 140rpx;
      height: 140rpx;
    }
    .title{
      text-align: center;
      margin-top: 28rpx;
      font-weight: 600;
      font-size: 48rpx;
      color: #222222;
    }
  }
  .form-box{
    padding: 0 64rpx;
    .input-item{
      display: flex;
      justify-content: space-between;
      margin-top: 72rpx;
      border-bottom: 2rpx solid rgba(0,0,0,0.1);
      .code-btn{
        width: 168rpx;
        height: 60rpx;
        padding: 0;
        background: #fff;
        border-radius: 8rpx;
        border-color: #A3A3A4;
        font-size: 28rpx;
        line-height: 60rpx;
        color: rgba(34,34,34,0.41);
        box-sizing: border-box;
      }
      .code-active{
        border-color: #08CB8F;
        color: #08CB8F;
      }
    }
    :deep(.is-input-border){
      border: none;
    }
  }
  .btn-box{
    margin-top: 150rpx;
    display: flex;
    justify-content: space-between;
    button{
      width: 304rpx;
      height: 88rpx;
      background: #08CB8F;
      // box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(50,181,102,0.58);
      border-radius: 51rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      line-height: 92rpx;
    }
    .secret-btn{

    }
    .tel-btn{
      background: #fff;
      border-radius: 51rpx;
      border: 2rpx solid #08CB8F;
      color: #08CB8F;
    }
  }
  .other-login{
    text-align: center;
    margin-top: 62rpx;
    font-size: 28rpx;
    color: #7F7F7F;
  }
</style>
